<template>
  <div class="box">
    <div class="title" style="margin-bottom: 15px">员工管理</div>
    <main class="app-main">
      <div class="container">
        <div class="top" style="display: flex; justify-content: space-between">
          <!--          搜索-->
          <div class="search" style="width: 200px">
            <el-input
              v-model="params.name"
              clearable
              placeholder="请输入员工姓名"
              @clear="search"
              @keyup.enter.native="searchDebounce.debouncedFunc"
            >
              <i
                slot="prefix"
                class="el-input__icon el-icon-search"
                @click="search"
              />
            </el-input>
          </div>
          <!--          添加-->
          <div class="addEmployee">
            <el-button
              type="primary"
              @click="$router.push('/employee/addEmployee')"
              >+ 添加员工</el-button
            >
          </div>
        </div>
        <!--          表格-->
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="员工姓名" width="180" />
            <el-table-column prop="username" label="账号" width="180" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column
              prop="status"
              label="账号状态"
              :formatter="formatStatus"
            />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button
                  size="mini"
                  type="text"
                  :disabled="scope.row.status === 3"
                  @click="edit(scope.row.id)"
                >
                  编辑
                </el-button>
                <span class="btn-divider" />
                <el-popconfirm
                  title="确认调整该账号的状态?"
                  @onConfirm="disabledBtn(scope.row.id, scope.row.status)"
                >
                  <el-button
                    slot="reference"
                    size="mini"
                    type="text"
                    style="color: #f56c6c"
                  >
                    {{ scope.row.status === 1 ? '禁用' : '启用' }}
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页组件 -->
        <div class="page-container">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="params.page"
            :limit.sync="params.pageSize"
            @pagination="getEmployeeList"
          />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { getEmployeeListAPI, disabledBtnAPI } from '@/api/employee'
import { createSearchDebounce } from '@/utils/debounceSearch'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data () {
    return {
      params: {
        page: 1,
        pageSize: 10,
        name: ''
      },
      tableData: [],
      total: 0,
      // 存储防抖实例（方便销毁时清理）
      searchDebounce: null
    }
  },
  created () {
    // console.log('11')
    this.getEmployeeList()
    // 初始化防抖函数：传入实际的搜索逻辑 500ms 内连续按 Enter 只会执行一次搜索
    this.searchDebounce = createSearchDebounce(this.search, 500)
  },
  beforeDestroy () {
    // 组件销毁时，取消防抖（关键：避免内存泄漏）
    this.searchDebounce?.cancel()
  },
  methods: {
    // 清除搜索框执行的方法
    search () {
      this.params.page = 1
      this.getEmployeeList()
    },
    // 禁用按钮
    async disabledBtn (id, status) {
      status = 1 - status
      await disabledBtnAPI({ id, status })
      this.$message.success('账号状态更改成功!')
      this.getEmployeeList()
    },
    // 编辑
    edit (id) {
      this.$router.push({
        path: '/employee/addEmployee',
        query: {
          id: id
        }
      })
    },
    // 分页相关函数
    // handleSizeChange (val) {
    //   // 每页多少条
    //   this.params.pageSize = val
    //   this.getEmployeeList()
    // },
    // handleCurrentChange (val) {
    //   // 当前页码
    //   this.params.page = val
    //   this.getEmployeeList()
    // },
    // 格式化状态
    formatStatus (row, column, cellValue, index) {
      const MAP = {
        0: '已禁用',
        1: '正常'
      }
      return MAP[cellValue]
    },
    // 获取列表数据
    async getEmployeeList () {
      if (this.params.name === '') delete this.params.name
      const res = await getEmployeeListAPI(this.params)
      console.log(res)
      console.log('接口返回数据：', res.data.records) // 确认这里是否有更新后的“哈哈”
      this.tableData = res.data.records
      this.total = res.data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  background: #f4f6f8;
  padding: 17px;
  margin: 0;
  .app-main {
    background: #ffffff; // 页面主区域背景改为白色
    padding: 20px;
    .container {
      background-color: #ffffff; // 内容容器背景改为白色
    }
  }
}

/* 覆盖 Element-UI 表格默认背景，确保整体白色 */
.el-table {
  background-color: #ffffff !important;
}
::v-deep .el-table__header,
::v-deep .el-table__body {
  background-color: #ffffff !important;
}
.page-container {
  text-align: center;
  margin-top: 20px;
}
/* 表格外层容器添加边框（外层边框） */
.table {
  margin-top: 20px;
  border: 1px solid #e4e7ed; /* Element UI 常用边框色，可根据需求调整 */
  border-radius: 4px; /* 可选：添加轻微圆角更美观 */
}

/* 去除表格列之间的边框 */
::v-deep .el-table {
  background-color: #ffffff !important;
  border: none; /* 取消表格自身的默认边框，避免与外层容器边框重叠 */
}

/* 去除表头单元格的左右边框 */
::v-deep .el-table__header th.el-table__cell {
  border-right: none !important; /* 取消列之间的竖线 */
}

/* 去除表体单元格的左右边框 */
::v-deep .el-table__body td.el-table__cell {
  border-right: none !important; /* 取消列之间的竖线 */
}

/* 可选：去除表格底部的默认横线（如果不需要） */
::v-deep .el-table::before {
  height: 0; /* 隐藏表格底部的横线 */
}
.btn-divider {
  display: inline-block;
  height: 12px; /* 竖线高度，可根据按钮字号调整 */
  margin: 0 6px; /* 左右间距，控制竖线与按钮的距离 */
  border-left: 1px solid #e4e7ed; /* 竖线颜色（浅灰色，营造“隐约”效果） */
  vertical-align: middle; /* 垂直居中，与按钮对齐 */
}
/* 搜索图标悬浮小手效果 */
.el-input__prefix .el-input__icon {
  cursor: pointer; /* 核心：悬浮时显示小手 */
}

/* 可选：添加轻微hover效果增强交互感 */
.el-input__prefix .el-input__icon:hover {
  color: #409eff; /* hover时图标变蓝（Element UI主题色） */
}
</style>
